<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JONP查询各式菜做法</title>
    <script src="jquery-1.12.4.js"></script>
    <script src="template-native.js"></script>
    <style>
        .all {
            margin-top: 30px;
        }

        .xh {
            float: left;
            margin-right: 20px;
            color: red;
            font-style: italic;
            font-size: 30px;
        }
      #txt{
          width: 400px;
          height: 45px;
          float: left;
      }
        #menu {
            width: 500px;
        }
        #menlist
        {
            width: 1200px;
            height: auto;
            margin: 0 auto;
        }
        #btn{
            width: 120px;
            height: 49px;
        }
    </style>

    <script id="tpl" type="text/html">
        <%  for(var i = 0; i < data.length; i++) { %>
        <div class="all">
            <h2><%= data[i].title %></h2>
            <p class="intro"><%= data[i].imtro %></p>
            <% for(var j = 0; j < data[i].albums.length; j++) { %>
            <img src="<%= data[i].albums[j] %>">
            <% } %>
            <p class="zl">主料：<%= data[i].ingredients %></p>
            <p class="fl">辅料：<%= data[i].burden %></p>
            <% for(var j = 0; j < data[i].steps.length; j++) { %>
            <div class="steps">
                <em class="xh"><%= j+1 %>.</em>
                <div class="c">
                    <p><%= data[i].steps[j].step %></p>
                    <p><img src="<%= data[i].steps[j].img  %>" alt=""></p>
                </div>
            </div>
            <% } %>
        </div>
        <hr/>
        <% } %>
    </script>

    <script>
        (function ajax(v){
            $.ajax({
                type:"get",
                url:"http://apis.juhe.cn/cook/query?key=8208aef22edebae26cb10260533a5d4c&dtype=jsonp",
                data: {menu:v},
                dataType:"jsonp",
                success: function (adata) {
                    if(adata.resultcode == 200) {
                        //获取到菜谱的数据
                        console.log(adata);
                        //渲染模板
                        var html = template("tpl", adata.result);
                        $("#menu").html(html);
                    }else{
                       
                    }
                },
                error: function () {
                    alert("请求出错");
                }
            });
            window.ajax=ajax;

        })()
       ajax("红烧肉");
        $(function () {
            $("#btn").click(function () {
                //要查询的菜
                var v = $("#txt").val();
                //发送请求  获取jsonp
                ajax(v);

            });
        })
    </script>
</head>
<body>
<h2>artTemplatejs模板引擎+Jsonp</h2>
<div id="menlist">
    <input type="text" name="" placeholder="请输入你要查找的菜名"id="txt">
    <input type="button"  value="查询" id="btn">
    <div id="menu"></div>
</div>

</body>
</html>